<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router>

        <el-menu-item index="/homepage">
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>首页</span>
        </el-menu-item>


        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Grid />
            </el-icon>
            <span>课程管理</span>
          </template>
          <el-menu-item index="/courses/type">
            <el-icon>
              <Tickets />
            </el-icon>
            <span>课程分类</span>
          </el-menu-item>
          <el-menu-item index="/courses/manage">
            <el-icon>
              <Smoking />
            </el-icon>
            <span>课程库</span>
          </el-menu-item>
          <el-menu-item index="/courses/comment">
            <el-icon>
              <Smoking />
            </el-icon>
            <span>课程评论</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Files />
            </el-icon>
            <span>题目管理</span>
          </template>

          <el-menu-item index="/questions/type">
            <el-icon>
              <Tickets />
            </el-icon>
            <span>题目类型</span>
          </el-menu-item>
          <el-menu-item index="/questions/manage">
            <el-icon>
              <Smoking />
            </el-icon>
            <span>题目库</span>
          </el-menu-item>
        </el-sub-menu>


        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Promotion />
            </el-icon>
            <span>用户管理</span>
          </template>

          <el-menu-item index="/user/manage">
            <el-icon>
              <Tickets />
            </el-icon>
            <span>用户列表</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <Management />
            </el-icon>
            <span>作业管理</span>
          </template>
          <el-menu-item index="/homework/manage">
            <el-icon>
              <Smoking />
            </el-icon>
            <span>作业库</span>
          </el-menu-item>
          <el-menu-item index="/homework/Usermanage">
            <el-icon>
              <Smoking />
            </el-icon>
            <span>成绩管理</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="6">
          <template #title>
            <el-icon>
              <Management />
            </el-icon>
            <span>考试管理</span>
          </template>
          <el-menu-item index="/exam/manage">
            <el-icon>
              <Smoking />
            </el-icon>
            <span>试卷库</span>
          </el-menu-item>
          <el-menu-item index="/exam/Usermanage">
            <el-icon>
              <Smoking />
            </el-icon>
            <span>成绩管理</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/purchase/manage">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>订单管理</span>
        </el-menu-item>

        <!-- <el-menu-item index="/coze">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>云课堂智能助手</span>
        </el-menu-item> -->


        <el-sub-menu index="7">
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item index="/user/info">
            <el-icon>
              <User />
            </el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <el-icon>
              <Crop />
            </el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/resetPassword">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8">
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>设置</span>
          </template>
          <el-menu-item index="/setting/loginfo">
            <el-icon>
              <User />
            </el-icon>
            <span>日志信息</span>
          </el-menu-item>
          <el-menu-item index="/setting/notice">
            <el-icon>
              <Crop />
            </el-icon>
            <span>公告</span>
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <el-dropdown placement="bottom-end">
          <span class="el-dropdown__box">
            <el-avatar :src="avatar" />
            <el-icon>
              <CaretBottom />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile" :icon="User"
                @click="handleDropdownClick('profile')">基本资料</el-dropdown-item>
              <el-dropdown-item command="avatar" :icon="Crop"
                @click="handleDropdownClick('avatar')">更换头像</el-dropdown-item>
              <el-dropdown-item command="password" :icon="EditPen"
                @click="handleDropdownClick('password')">重置密码</el-dropdown-item>
              <el-dropdown-item command="logout" :icon="SwitchButton"
                @click="handleDropdownClick('logout')">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 中间区域 -->
      <el-main>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="{ path: item.path }">
            {{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 标签页导航 -->
        <el-tabs v-model="activeTab" type="card" closable @tab-remove="closeTab" @tab-click="handleTabClick">
          <el-tab-pane v-for="tab in tabs" :key="tab.path" :label="tab.name" :name="tab.path">
            <!-- 内容区 -->
            <router-view></router-view>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <!-- 底部区域 -->
      <el-footer>创智云课堂 </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import {
  Management,Promotion,UserFilled,User,Crop,EditPen,SwitchButton,CaretBottom,Tickets, Smoking,Grid,Files,HomeFilled
} from "@element-plus/icons-vue";
import { ref, watch, onMounted } from 'vue';
import avatar from "@/assets/default.png";
import router from "@/router";
import { computed } from 'vue';
import { ElMessage } from 'element-plus';
import { ElTabs, ElTabPane } from 'element-plus';
import { ChatStartService, ChatStart1Service, ChatMessageService, GetCozeTokenService } from "@/api/userCoze";

const breadcrumbItems = computed(() => {
  const matched = router.currentRoute.value.matched;
  return matched.map(route => ({
    path: route.path,
    name: route.meta.title || route.name
  })).filter(item => item.name);
});

// 标签页状态管理
const tabs = ref([]);
const activeTab = ref(router.currentRoute.value.path);

// 监听路由变化，添加或激活标签页
watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    const existingTab = tabs.value.find(tab => tab.path === newPath);
    if (!existingTab) {
      const route = router.currentRoute.value;
      tabs.value.push({
        path: newPath,
        name: route.meta.title || route.name
      });
    }
    activeTab.value = newPath;
  },
  { immediate: true }
);

// 关闭标签页
const closeTab = (tabPath) => {
  tabs.value = tabs.value.filter(tab => tab.path !== tabPath);
  if (activeTab.value === tabPath) {
    const lastTab = tabs.value[tabs.value.length - 1];
    if (lastTab) {
      activeTab.value = lastTab.path;
      router.push(lastTab.path);
    } else {
      activeTab.value = '';
      router.push('/');
    }
  }
};

// 弹出窗口函数
const handleTabClick = (tab) => {
  // 发送一个 ElMessage 来显示提示框
  ElMessage({
    message: `你点击了标签页: ${tab.props.name}`,
    type: 'success'
  });

  // 实现跳转路由
  router.push(tab.props.name);
};

// 下拉菜单点击处理函数
const handleDropdownClick = (command) => {
  switch (command) {
    case 'profile':
      router.push('/user/info');
      break;
    case 'avatar':
      router.push('/user/avatar');
      break;
    case 'password':
      router.push('/user/resetPassword');
      break;
    case 'logout':
      // 处理退出登录逻辑
      // 例如：清除用户信息并跳转到登录页面
      // 这里仅做示例，具体逻辑需要根据实际情况实现
      if (client.value) {
        client.value.destroy();
      }
      router.push('/login');
      break;
    default:
      break;
  }
};

// 引入 CozeWebSDK  后端调用接口自由传入用户的OAuth JWT
const client = ref(null);
onMounted(async () => {
  try {
    const { data } = await GetCozeTokenService();
    const token = data;
    const script = document.createElement('script');
    script.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.6/libs/cn/index.js';
    script.onload = () => {
      client.value = new CozeWebSDK.WebChatClient({
        config: {
          bot_id: '7475705356875399222',
        },
        componentProps: {
          title: '创智云课堂',
        },
        auth: {
          type: 'token',
          token: token,
          onRefreshToken: function () {
            return token;
          }
        },
        ui: {
          footer: {
            isShow: false
          }
        }
      });
    };
    document.head.appendChild(script);
  } catch (error) {
    console.error('获取token失败:', error);
  }
});
</script>
<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #232323;

    &__logo {
      height: 120px;
      background: url("@/assets/logo.png") no-repeat center / 120px auto;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }

  .el-breadcrumb {
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
    background-color: transparent; /* 设置背景透明 */
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .el-breadcrumb__item {
      &:last-child {
        .el-breadcrumb__inner {
          color: #ff9900; /* 设置文本颜色为橙色 */
          font-weight: normal;
        }
      }

      .el-breadcrumb__separator {
        color: #666;
      }
    }

    .el-breadcrumb__inner {
      color: #ff9900; /* 设置文本颜色为橙色 */
    }
  }

  .el-tabs {
    margin-bottom: 20px;

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__nav {
      border: none;
    }

    .el-tabs__item {
      border: none;
      border-bottom: 2px solid transparent;
      padding: 0 20px;

      &.is-active {
        border-bottom: 2px solid #ffd04b;
      }
    }

    .el-tabs__content {
      padding: 0;
    }
  }
}
.layout-container {
  .el-aside {
    .el-menu {
      .el-menu-item span {
        font-weight: bold; /* 加粗字体 */
        font-size: 16px;
        padding: 15px 20px; /* 增加 padding 以增加高度 */
      }
      .el-sub-menu__title span {
        font-weight: bold; /* 加粗字体 */
        font-size: 16px;
        padding: 15px 20px; /* 增加 padding 以增加高度 */
      }
    }
  }
}
</style>    